vue 的事件冒泡 您所在的位置:网站首页 vue 事件冒泡 vue 的事件冒泡

vue 的事件冒泡

2023-08-05 15:31| 来源: 网络整理| 查看: 265

一、事件冒泡 方法一、使用event.cancelBubble = true来组织冒泡 methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelBubble=true; /*阻止冒泡*/ }, show2:function(){ alert(2); } } 方法二:使用vue自带的方法组织冒泡 拓展:事件修饰符 参考API:http://cn.vuejs.org/v2/guide/events.html#事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self .once ... ... 二、键盘事件 show:function(){ alert(1); } show2:function(ev){ console.log(ev.keyCode); if(ev.keyCode==13){ alert('按下了回车键盘'); } }, show3:function(ev){ console.log(ev.keyCode); if(ev.keyCode==13){ alert('回车键盘弹起的时候触发的事件show3'); } } 拓展:按键修饰符 参考API:http://cn.vuejs.org/v2/guide/events.html#按键修饰符 在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: 记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名 全部的按键别名: .enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta ******** 注意:在Mac系统键盘上,meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上,meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MIT和Lisp键盘及其后续,比如Knight键盘,space-cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META” 或者 “Meta”。 ******** 可以通过全局 config.keyCodes 对象自定义按键修饰符别名: // 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112 Do something 三、checkbox 注意对比angular写法,选中与不选中直接对应的是显示还是隐藏我们的box,flag在默认的data中设置为false box 四、select 对比angular写法http://www.runoob.com/angularjs/angularjs-select.html data: { selected: 'C', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } {{item.text}} 选中:{{selected}} 五、radio 对比angular 使用四中的源数据 {{option.text}} 选择的是: {{ selected }} 六、生命周期函数 对比react生命周期函数 初始化: getDefaultProps:作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。 getInitialState:作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。 componentWillMount:在完成首次渲染之前调用,此时仍可以修改组件的state。 render 必选的方法,创建虚拟DOM,该方法具有特殊的规则: 只能通过this.props和this.state访问数据 可以返回null、false或任何React组件 只能出现一个顶级组件(不能返回数组) 不能改变组件的状态 不能修改DOM的输出 componentDidMount:真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。 运行时: componentWillReceiveProps:组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。 componentWillReceiveProps: function(nextProps) { if (nextProps.bool) { this.setState({ bool: true }); } } shouldComponentUpdate:组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。 componentWillUpdate:接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。 render componentDidUpdate:完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。 销毁: componentWillUnmount:组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。 参考API:http://cn.vuejs.org/v2/guide/instance.html#实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。 beforeCreate:实例刚刚被创建1 created:实例已经创建完成2 beforeMount:模板编译之前3 mounted:模板编译完成4------********请求数据放在这个里面 必须记住***** beforeUpdate:数据更新之前 updated:数据更新完毕 beforeDestroy:实例销毁之前 destroyed:实例销毁完成 ----this.$destroy();销毁实例 {{msg}} data:{ msg:'welcome vue2.0' }, methods:{ /*自定义方法*/ update(){ this.msg='大家好'; }, destroy(){ this.$destroy(); /*销毁实例 组件*/ } } 七、模拟百度搜索提示功能 1、监听文本框中的值 2、请求百度的接口 3、实现方法,watch监听文本框的输入变化,按键修饰符keyup实现 4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。 // var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue; {{item}} 方法一watch: 引入 data:{ search:'', list:[] } var timer=''; vm.$watch('search',function(newValue){ console.log(newValue); clearTimeout(timer); var _that=this; timer=setTimeout(function(){ //去服务器请求数据 var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue; _that.$http.jsonp(api,{ jsonp:'cb' /*改变回调函数*/ }).then(function(data){ console.log(data.body.s); _that.list=data.body.s; /*改变data绑定的值*/ }) },200); }) 方法二:键盘事件 @keyup data:{ search:'', list:[], timer:'' }, methods:{ requestData:function(){ var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search; var _that=this; clearTimeout(this.timer); /*清除定时器*/ this.timer=setTimeout(function(){ //去服务器请求数据 _that.$http.jsonp(api,{ jsonp:'cb' /*改变回调函数*/ }).then(function(data){ console.log(data.body.s); _that.list=data.body.s; /*改变data绑定的值*/ }) },200) } }

 

一、事件冒泡

方法一、使用event.cancelBubble = true来组织冒泡

methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelBubble=true; /*阻止冒泡*/ }, show2:function(){ alert(2); } }

 

方法二:使用vue自带的方法组织冒泡

 

           拓展:事件修饰符

参考API:http://cn.vuejs.org/v2/guide/events.html#事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

        .stop

.prevent

.capture

.self

.once

...

...

二、键盘事件

show:function(){ alert(1); } show2:function(ev){ console.log(ev.keyCode); if(ev.keyCode==13){ alert('按下了回车键盘'); } }, show3:function(ev){ console.log(ev.keyCode); if(ev.keyCode==13){ alert('回车键盘弹起的时候触发的事件show3'); } }

 

  拓展:按键修饰符

  参考API:http://cn.vuejs.org/v2/guide/events.html#按键修饰符

  在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

 

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名

全部的按键别名:

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

********

注意:在Mac系统键盘上,meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上,meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MIT和Lisp键盘及其后续,比如Knight键盘,space-cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META” 或者 “Meta”。

********

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

 

Do something

三、checkbox

注意对比angular写法,选中与不选中直接对应的是显示还是隐藏我们的box,flag在默认的data中设置为false

box

 

四、select

对比angular写法http://www.runoob.com/angularjs/angularjs-select.html

data: { selected: 'C', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } {{item.text}} 选中:{{selected}}

 

五、radio

对比angular

使用四中的源数据

{{option.text}} 选择的是: {{ selected }}

 

六、生命周期函数

对比react生命周期函数

初始化:

getDefaultProps:作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。

getInitialState:作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。

componentWillMount:在完成首次渲染之前调用,此时仍可以修改组件的state。

render

必选的方法,创建虚拟DOM,该方法具有特殊的规则:

只能通过this.props和this.state访问数据

可以返回null、false或任何React组件

只能出现一个顶级组件(不能返回数组)

不能改变组件的状态

不能修改DOM的输出

componentDidMount:真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

运行时:

componentWillReceiveProps:组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) { if (nextProps.bool) { this.setState({ bool: true }); } }

 

shouldComponentUpdate:组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。

componentWillUpdate:接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。

render

componentDidUpdate:完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。

销毁:

componentWillUnmount:组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

参考API:http://cn.vuejs.org/v2/guide/instance.html#实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。

beforeCreate:实例刚刚被创建1

created:实例已经创建完成2

beforeMount:模板编译之前3

mounted:模板编译完成4------********请求数据放在这个里面  必须记住*****

beforeUpdate:数据更新之前

updated:数据更新完毕

beforeDestroy:实例销毁之前

destroyed:实例销毁完成    ----this.$destroy();销毁实例

{{msg}} data:{ msg:'welcome vue2.0' }, methods:{ /*自定义方法*/ update(){ this.msg='大家好'; }, destroy(){ this.$destroy(); /*销毁实例 组件*/ } }

 

七、模拟百度搜索提示功能

1、监听文本框中的值

2、请求百度的接口

3、实现方法,watch监听文本框的输入变化,按键修饰符keyup实现

4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。

// var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue; {{item}}

 

方法一watch:

引入 data:{ search:'', list:[] } var timer=''; vm.$watch('search',function(newValue){ console.log(newValue); clearTimeout(timer); var _that=this; timer=setTimeout(function(){ //去服务器请求数据 var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue; _that.$http.jsonp(api,{ jsonp:'cb' /*改变回调函数*/ }).then(function(data){ console.log(data.body.s); _that.list=data.body.s; /*改变data绑定的值*/ }) },200); })

 

 方法二:键盘事件  @keyup

           

data:{ search:'', list:[], timer:'' }, methods:{ requestData:function(){ var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search; var _that=this; clearTimeout(this.timer); /*清除定时器*/ this.timer=setTimeout(function(){ //去服务器请求数据 _that.$http.jsonp(api,{ jsonp:'cb' /*改变回调函数*/ }).then(function(data){ console.log(data.body.s); _that.list=data.body.s; /*改变data绑定的值*/ }) },200) } }

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有